<template>
	<view class="box">
		<view class="box-tips">
			<h2 class='h2'>
				{{verificationTitle[validateFlage==false ? 0 : 1].title}}
			</h2>
			<view class="verification">{{verificationTitle[step].desc}}</view>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm">
				<view >
					<u-form-item label-width="120" label="手机号" prop="mobile">
						<u-input maxlength="11" v-model="form.mobile" placeholder="请输入您的手机号" />
					</u-form-item>

					<u-form-item class="sendCode" label-width="120" prop="code" label="验证码">
						<u-input v-model="form.code" placeholder="请输入验证码" />
						<view @tap="getCode" class="text-tips">{{ tips }}</view>
            <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
                                 @change="codeChange"></u-verification-code>
					</u-form-item>
				</view>
				<view >
					<u-form-item label-width="120" label="新密码" prop="newPwd">
						<u-input type="password" v-model="form.newPwd" placeholder="请输入您的密码" />
					</u-form-item>

					<u-form-item label-width="120" label="确认密码" prop="confirmPwd">
						<u-input type="password" v-model="form.confirmPwd" placeholder="请再次输入您的密码" />
					</u-form-item>

					<view class="submit" @click="updatePassword">修改密码</view>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				validateFlage: false, //是否进行了手机号验证
				verificationTitle: [{
						title: "安全验证",
						desc: "请输入当前手机号进行安全验证",
					},
					{
						title: "修改密码",
						desc: "请输入新密码",
					},
				],
				step: 0, //当前验证步骤
				flage: false, //是否验证码验证

				form: {
					mobile: "", //手机号
					code: "", //验证码
          newPwd: "",
          confirmPwd: ""
				},
				tips: "获取验证码", //提示
				seconds: 60, // 60s等待时间

				// 验证码登录校验
				codeRules: {
					mobile: [{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: "手机号码不正确",
						trigger: ["blur"],
					}, ],
					code: [{
						min: 4,
						max: 6,
						required: true,
						message: "请输入验证码",
						trigger: ["blur"],
					}, ],
          newPwd: [
            {
              required: true,
              message: '请输入新密码',
              trigger: ['blur', 'change'],
            },
            {
              pattern: /^[0-9a-zA-Z]{6,18}$/g,
              // 正则检验前先将值转为字符串
              transform(value) {
                return String(value);
              },
              message: '只能包含6-18位数字或字符组合'
            }],
          confirmPwd: [
            {
              required: true,
              message: '请输入确认密码',
              trigger: ['blur', 'change'],
            },
            {
              pattern: /^[0-9a-zA-Z]{6,18}$/g,
              // 正则检验前先将值转为字符串
              transform(value) {
                return String(value);
              },
              message: '只能包含6-18位数字或字符组合'
            }],
				},
			};
		},
		onReady() {
			// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
			this.$refs.uForm.setRules(this.codeRules);
		},
		watch: {

		},
		methods: {
			// 修改密码
			updatePassword() {
        this.$refs.uForm.validate(valid =>{
          if (valid){
            if(this.form.newPwd !== this.form.confirmPwd){
              uni.showToast({
                title: "两次输入密码不一致!",
                icon: "none",
              });
              return;
            }
            let param = {
              data :  this.form
            }

            this.$clApi.login.resetPwdByMobile(param).then(res => {
              uni.showToast({
                title: "修改成功!",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1000);
            })
          }else{
            console.log('验证失败');
          }
        })

			},

			/**获取验证码 */
			getCode() {
        if(this.$refs.uCode.canGetCode){
          if (this.tips == "重新获取") {
            this.fetchSendSms(); //发送
          }
          if (!this.$u.test.mobile(this.form.mobile)) {
            uni.showToast({
              title: "请输入正确手机号",
              icon: "none",
            });
            return false;
          }
          if (!this.flage) {
            this.fetchSendSms(); //发送
            return false;
          }
        }
			},
      fetchSendSms(){
        this.$clApi.login.sendResetPwdSms(this.form.mobile).then(res =>{
          this.current = 1
          this.$refs.uCode.start();
          this.flage = true;
        })
      },
			start() {
				this.$u.toast("验证码已发送");
			},
      end() {
        this.flage = false;
        this.$u.toast('倒计时结束');
      },
      codeChange(text) {
        this.tips = text;
      },
		},
	};
</script>
<style lang="scss" scoped>
	@import url("@/pages/passport/login.scss");

	/deep/ .u-form-item {
		margin: 40rpx 0;
	}

	.sendCode {
		/deep/ .u-form-item--right__content__slot {
			display: flex;
		}
	}

	.h2 {
		font-size: 40rpx;
		font-weight: bold;
	}

	page {
		background: #fff;
	}

	.box {
		padding: 80rpx 0;
		border-radius: 20rpx;
	}

	.submit {
		background: $light-color;
	}

	.box-tips {
		margin: 0 72rpx;
	}

	.verification {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}
</style>
